<template lang="html">
  <div class="home">
    <!-- <h1>首页</h1> -->
    <searchshou v-show="isflag"></searchshou>
    <div class="loading_box1" v-if="bol">
      <Row>
      <Col class="demo-spin-col" span="8">
               <Spin fix>
                   <!-- <Icon type="load-c" size=18 class="demo-spin-icon-load"></Icon>
                   <div>Loading</div> -->
                   <img src="../../static/imgs/boy.gif" alt="">
               </Spin>
         </Col>
      </Row>
      <!-- <img src="../../static/imgs/boy.gif" alt=""> -->
    </div>
    <v-scroll :on-refresh="onRefresh">
    <swiper class="swip_1" :options="swiperOption"  ref="mySwiper">
        <!-- 这部分放你要渲染的那些内容 -->
        <swiper-slide v-for="(item,index) in items">
            <img :src="item.actPicUrl" class="index_img">
        </swiper-slide>
        <!-- 这是轮播的小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <swiper class="swip1_1  mar_bot10" :options="swiperOption1"  ref="mySwiper">
        <!-- 这部分放你要渲染的那些内容 -->
        <swiper-slide v-for="(item1,index) in 2">
            <div class="index_img">

              <div v-if="item1 == 1" class="span_1">
                <div v-for="(item1_1,index) in 5" class="mod_1">
                  <router-link :to="'/tour' + item1_1+'/' ">
                  <img :src="taginfo[item1_1-1].imageUrl" v-if="taginfo[item1_1-1]" alt="" width="20" height="20">
                  <span v-if="taginfo[item1_1-1]">{{taginfo[item1_1-1].title}}</span>
                  </router-link>
                  <router-view></router-view>
                </div>
                <div v-for="(item1_1,index) in 5" class="mod_1">
                  <img :src="taginfo[item1_1+4].imageUrl" v-if="taginfo[item1_1-1]" alt="" width="20" height="20">
                  <span v-if="taginfo[item1_1+4]">{{taginfo[item1_1+4].title}}</span>
                </div>
              </div>

              <div v-if="item1 == 2" class="span_1">
                <div v-for="(item1_1,index) in 7" class="mod_1">
                  <img :src="taginfo[item1_1+9].imageUrl" v-if="taginfo[item1_1-1]" alt="" width="20" height="20">
                  <span v-if="taginfo[item1_1+9]">{{taginfo[item1_1+9].title}}</span>
                </div>
              </div>
            </div>
        </swiper-slide>
        <!-- 这是轮播的小圆点 -->
        <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
    <zuoyoukuai :objdata="killProduct" v-if="killProduct"></zuoyoukuai>
    <startxin></startxin>
    <gongl :objmarketing1 ="marketing" v-if="marketing"></gongl>
    <lvxing :objmarketing2 ="marketing" v-if="marketing"></lvxing>
    <rement :themeProduct_1 ="themedata" v-if="themedata"></rement>
    <morejingcai :morejincai_1="moreWond" v-if="moreWond"></morejingcai>
    <div class="service"><img src="http://m.caissa.com.cn/static/images/bot_pic.jpg"></div>
  </v-scroll>
  </div>

</template>

<script>
// 导入轮播图组件
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import zuoyoukuai from '../components/zuoyoukuai'
import startxin from '../components/starxinlu'
import gongl from '../components/gonglv'
import lvxing from '../components/lvxing'
import rement from '../components/rementui'
import morejingcai from '../components/morejingcai'
import searchshou from '../components/search_shou1'

import Scroll from '../components/pull-refresh';
import bus from '../js/bus'
    export default{
        name:'index',
        components: {
            swiper,
            swiperSlide,
            zuoyoukuai,
            startxin,
            gongl,
            lvxing,
            rement,
            morejingcai,
            searchshou,
            'v-scroll': Scroll
        },
        data() {
            return {
                bol: true,
                swiperOption: {
                    notNextTick: false,
                    pagination: '.swiper-pagination',
                    slidesPerView: 'auto',
                    centeredSlides: true,
                    autoplay: 3000,
                    paginationClickable: true,
                    preventClicks: false,
                    autoplayDisableOnInteraction:false,
                    onSwiping: false,
                    // observer:true,//修改swiper自己或子元素时，自动初始化swiper
                    // observeParents:true//修改swiper的父元素时，自动初始化swiper

                },
                swiperOption1: {
                    pagination: '.swiper-pagination',
                    centeredSlides: true,
                    paginationClickable: true,
                },
                swiperSlides: [],
                items:[],
                taginfo:[],
                // killProduct:{[{"date":"0","departure":"0","groupid":"0","isSale":"0","lineid":"0","name":"0","nowprice":"0","num":"0","pic":"0","price":"0","sourceName":"0"}]},
                killProduct:"",
                marketing:{},
                themedata:{},
                moreWond:[],
                dlcation:'',
                isflag:true
            }
        },
        created(){
          setTimeout(()=>{
            this.bol = false;
         },5000)
          this.getList();
          bus.$on('scolby',diff=>{
              if (diff > 0) {
                this.isflag = false
              }
            })
        },
        methods:{
          getList(){

            this.axios.get('http://txspring.cn:8080/getData').then((response)=> {
               console.log(response);
               if (response.data.resultmsg.code == '0') {
                 this.items = response.data.topPage.activityInfo;
                 this.taginfo = response.data.tagActivity.modules;
                 console.log("parent killProduct");
                 console.log(response.data.killProduct);
                 this.killProduct = response.data.killProduct;
                 this.marketing = response.data.marketingActivities;
                 this.themedata = response.data.themeProduct;
                 this.moreWond = response.data.moreWonderfuls;
                 for (let i = 0; i < response.data.topPage.totalCount; i++) {
                   this.swiperSlides.push(i+1);
                 }
               } else {
                 alert(response.data.resultmsg.msg);
               }
               this.swiperOption.loop = true;
               setTimeout(()=>{
                  this.bol = false;
               },3000)
             }) .catch(function (error) {
                console.log(error);
              });
          },
          onRefresh(done) {

             setTimeout(()=>{
                this.getList();
                done(); // call done
                this.isflag = true
             },2000)
           }

        }

    }
</script>

<style lang="css">
/*loading页面*/
.loading_box1{
   /*background-color: red;
   margin-top: 0rem;*/
}
.loading_box1 img{
   width:35rem;
   height:50rem;
   position: fixed;
   left:-6rem;
   top:0;
   background-color: rgba(0,0,0,.2);
}
.ivu-spin-show-text .ivu-spin-tex{
   background-color: pink !important;
}
/*.demo-spin-icon-load{
   animation: ani-demo-spin 1s linear infinite;
}*/
/*@keyframes ani-demo-spin {
   from { transform: rotate(0deg);}
   50%  { transform: rotate(180deg);}
   to   { transform: rotate(360deg);}
}
.demo-spin-col{
    height: 100px;
    margin-top: 70%;
    margin-left: 34%;
    background-color: #fff;
    position: relative;
    font-size: 2rem;
}*/


  .service {
    overflow: hidden;
    padding-bottom: 18px;
  }
  .service img{
    border: none;
    vertical-align: middle;
    width: 100%;
  }
  .home{
    background-color: lightgray;
  }
  .mar_bot10{
    margin-bottom: 10px;
  }
  .mod_1{
    width: 20%;
    height: 100%;
    background: white;
    float: left;
  }
  .span_1{
    height: 50%;
  }
  .swip1_1 .index_img{
    width: 100%;
    height: 9rem;
  }
  .model_1{
    width: 15%;
    height: 3.5rem;
    background-color: green;
  }
  .mod_1>a>img,.mod_1>img{
    margin-top: 0.3rem;
  }
  .mod_1>a>span,.mod_1>span{
    width: 100%;
    display: block;
    color: black;
  }
  .swip_1{
    height: 18rem;
  }
  .swip1_1{
    height: 9rem;
    background: white;
  }
  .swip1_1 .swiper-pagination{
    top: 7.7rem;
  }
  .swip1_1 .swiper-pagination>span{
    width: 0.4rem;
    height: 0.4rem;
  }
  .swiper-pagination{
    top: 16rem;
    left: 45%;
  }
  .swiper-pagination-bullet{
    margin-right: 0.5rem;
  }
  .swip_1 img{
    width: 100%;
    height: 100%;
  }
  .swiper-pagination-bullet-active{
    background-color: red;
  }
  .swiper-pagination-bullet{
    background-color: rgba(0,0,0,.5);
  }
</style>
